<template>
  <div :class="styles.billContainer">
    <div :class="styles.header">
      <div :class="styles.headerLeft">
        <LeftOutlined
          @click="handleRouteSkip('/services')"
          :style="{ fontSize: '20px', color: '#343434' }"
        />

        <CloseOutlined
          @click="handleRouteSkip('/services')"
          :style="{ fontSize: '20px', color: '#343434' }"
        />
      </div>
      <div :class="styles.title">话费账单</div>

      <ShareAltOutlined :style="{ fontSize: '20px', color: '#343434' }" />
    </div>

    <div :class="styles.tabsContainer" ref="tabsContainer">
      <div :class="styles.tabs">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          :class="[styles.tab, { [styles.active]: activeTab === index }]"
          @click="handleChange(index)"
        >
          {{ item }}月
        </div>
      </div>
    </div>
    <div :class="styles.mainContain">
      <div :class="styles.billDetails">
        <div :class="styles.detailTop">
          <div :class="styles.customerName">
            <span>客户名称：</span>
            <div :class="styles.nameBox">
              <span :class="styles.name">{{ customName }}</span>
              <div :class="styles.eyeIcon" @click="handleClickEyes">
                <img :src="isShow ? openEyes : closeEyes" alt="" />
              </div>
            </div>
          </div>

          <div :class="styles.customerBtn">
            <div :class="styles.read">阅读指南</div>
            <div :class="styles.love">
              <SwapOutlined
                :style="{
                  fontSize: '14px',
                  color: '#f44262',
                  transform: 'rotateY(-180deg)',
                }"
              />

              关爱版
            </div>
          </div>
        </div>
        <div :class="styles.zq">
          <span>账单周期：</span>
          <span>{{ config.bill.period }}</span>
        </div>

        <div :class="styles.amount">
          <div :class="styles.amountContain">
            <div :class="styles.top">
              <span>账号下所有号码</span>
              <span>当前登录号码</span>
            </div>
            <div :class="styles.btm">
              <div :class="styles.btm_title">
                <span>手机</span>
                <div :class="styles.num">{{ config.bill.phoneNum }}</div>
              </div>
              <div :class="styles.btm_contain">
                <div :class="styles.btm_contain_top">
                  <span :class="styles.btm_contain_top_title">
                    {{ isCurrentMonth ? "本月消费" : "实际应付" }}
                    <span>(元)</span>
                  </span>
                  <span :class="styles.expenditure">{{
                    isCurrentMonth
                      ? config.bill.expense
                      : config.bill.lastMonth.money
                  }}</span>
                </div>
                <div v-if="!isCurrentMonth" :class="styles.lastMonth">
                  <div :class="styles.lastMonth_title">
                    <span>账单合计(元)</span>
                    <span>{{ config.bill.lastMonth.total }}</span>
                  </div>
                  <div :class="styles.lastMonth_btm">
                    <div>
                      赠费抵扣(元)
                      <img src="../assets/img/bill/tishi.jpg" alt="" />
                    </div>
                    <span> -{{ config.bill.lastMonth.zk }} </span>
                  </div>
                  <div :class="styles.sjImg">
                    <img src="../assets/img/bill/sj.jpg" alt="" />
                  </div>
                </div>
                <span v-if="!isCurrentMonth" :class="styles.over"
                  >本期费用已结清</span
                >

                <div :class="styles.btm_contain_btn">去充值</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="isCurrentMonth" :class="styles.warning">
          本月消费仅供参考，部分优惠或赠金抵扣暂未体现，请参考次月出账后的月账单。
        </div>
        <div v-else :class="styles.computedLast">
          <div :class="styles.left">
            <span>实际应付较上月：</span>
            <div :class="styles.text" :style="{ color: config.bill.lastMonth.compare.result === 'equal' ? '#313131' : config.bill.lastMonth.compare.result === 'up' ? '#f26563' : '#38c145' }">

              <template v-if="config.bill.lastMonth.compare.result === 'equal'"
                >持平</template
              >
              <template v-else>
                <span> {{ config.bill.lastMonth.compare.result === 'up' ? '+' : '-' }}  </span>
                <span>￥</span>
                <span>{{ config.bill.lastMonth.compare.money }}</span>
                <img :src="config.bill.lastMonth.compare.result === 'up' ? upImg : lowImg" alt="" />
              </template>
            </div>
          </div>
          <div :class="styles.right">
            <span>详情分析</span>
            <RightOutlined />
          </div>
        </div>
      </div>
      <div :class="styles.footer">
        <div :class="styles.planInfo">
          <span>{{ config.bill.plan }}</span>
          <div :class="styles.expand">
            <span>全部展开</span>
            <DownOutlined :style="{ color: '#b3b3b3', marginLeft: '5px' }" />
          </div>
        </div>
        <div :class="styles.infoDetail">
          <div
            v-for="(item, index) in phoneArr"
            :key="index"
            :class="[
              styles.detailItem,
              { [styles.detailItem_border]: index !== phoneArr.length - 1 },
            ]"
          >
            <div :class="styles.detailItemLeft">
              <span>手机：</span>
              <span>{{ item.phoneNumber }}</span>
              <span
                :style="{
                  background: item?.isMainCard ? '#ff5e5e' : '#ff9834',
                }"
              >
                {{ item?.isMainCard ? "主卡" : "副卡" }}
              </span>
            </div>
            <div :class="styles.item_total">
              {{ item.subtotal }}
              <DownOutlined :style="{ color: '#b3b3b3', marginLeft: '2px' }" />
            </div>
          </div>
        </div>

        <div :class="styles.total">
          <span>合计：</span>
          <span>{{ config.bill.total }}</span>
        </div>
      </div>
      <div :class="styles.btm_img">
        <img src="../assets/img/bill/bill_btm.jpg" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  LeftOutlined,
  CloseOutlined,
  ShareAltOutlined,
  SwapOutlined,
  DownOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
import { ref, onMounted, computed } from "vue";
import styles from "./Bill.module.less";
import config from "../config";
import closeEyes from "../assets/img/bill/bill_close_eyes.jpg";
import openEyes from "../assets/img/bill/bill_open_eyes.jpg";
import upImg from "../assets/img/bill/up.jpg";
import lowImg from "../assets/img/bill/low.jpg";

import { useRouter } from "vue-router";
const router = useRouter();

const activeTab = ref(12); // 默认选择 8月
const tabsContainer = ref(null);
const tabs = ref(config.bill.month);
const isShow = ref(false);
const originalName = ref(config.bill.name);
const phoneArr = ref(config.bill.phoneArr);
const isCurrentMonth = ref(true);

const customName = computed(() => {
  return isShow.value
    ? originalName.value
    : originalName.value.charAt(0) + "*".repeat(originalName.value.length - 1);
});

onMounted(() => {
  if (tabsContainer.value) {
    // 在页面渲染后，自动滚动到最右边
    tabsContainer.value.scrollLeft = tabsContainer.value.scrollWidth;
  }
});

const handleClickEyes = () => {
  isShow.value = !isShow.value;
};

const handleChange = (index) => {
  activeTab.value = index;
  if (index === 12) {
    isCurrentMonth.value = true;
  } else {
    isCurrentMonth.value = false;
  }
};

const handleRouteSkip = (path) => {
  router.push(path);
};
</script>

<style scoped lang="less">
</style>
